<template>
  <view class="box">
    <view class="top_title">附近门店:</view>
    <view style="height: 90rpx"></view>
    <view
      class="shop_item"
      :key="item.id"
      v-for="item in centers"
      @click="backPage(item)"
    >
      <view class="icon">
        <uni-icons color="#e70d0d" type="location-filled" size="72rpx"></uni-icons>
      </view>
      <view class="shop_info">
        <view class="title">{{ item.text }}</view>
        <view>{{ item.address }}</view>
        <view
          >门店电话：<text class="phone">{{ item.hotline }}</text></view
        >
      </view>
      <view class="shop_distance" v-if="!isNaN(item.distance)">
        <view>距离</view> <view class="num">{{ item.distance }}</view>
        <view>公里</view>
      </view>
      <view class="shop_distance shop_dist" v-else @click.stop="getLocation">
        <view class="text">授权位置后，</view>
        <view class="text">更好的服务您</view>
      </view>
    </view>
    <view style="height: 10rpx"></view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { location } from '@/mixins/location'
export default {
  mixins: [location],
  name: 'companyService',
  data() {
    return {}
  },
  onLoad() {
    // 混合分享信息
    this.shareMixin.title = `客服列表`
    this.shareMixin.path = `/pages/Service/ServiceList`
  },
  computed: {
    ...mapState(['carSeris', 'centers', 'latLog','brandInfo']),
  },
  methods: {
    backPage(item) {
      uni.setStorageSync('oneCenters', JSON.stringify(item))
      // 返回 上一页
      uni.navigateBack({
        delta: 1,
      })
    },
    ...mapMutations(['saveLatLog', 'saveCenters']),
  },
}
</script>

<style>
page {
  background-color: #fafafa;
}
</style>
<style scoped lang="scss">
.box {
  position: relative;
  // padding: 0 30rpx;
  .top_title {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 0rpx 30rpx 0rpx 30rpx;
    position: fixed;
    line-height: 60rpx;
    top: 0;
    left: 0;
  }
  .shop_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    box-shadow: $theme-shadow;
    .icon {
      width: 100rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      uni-icons {
        color: $theme-color;
      }
    }
    .shop_info {
      flex: 1;
      line-height: 46rpx;
      .title {
        font-weight: 600;
      }
      .phone {
        font-size: 28rpx;
        color: $theme-color;
      }
    }
    .shop_distance {
      width: 120rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .num {
        font: size 30rpx;
        color: #19b927;
        font-weight: 600;
      }
    }
    .shop_dist {
      width: 168rpx !important;
      font-size: 24rpx !important;
      text-align: center;
      color: #19b927;
    }
  }
}
</style>
